<template>
    <base-card>
        <div class="flex">
            <div class="blue-radius"></div>
            <h2 class="page-title">服务项目管理</h2>
        </div>

        <div class="search">
            <el-form :model="form" label-width="auto" style="display: flex;">
                <el-form-item label="项目类型">
                    <el-select v-model="form.type" placeholder="请选择" clearable style="width: 200px;">
                        <el-option label="全部" value="全部" />
                        <el-option label="付费项目" value="付费项目" />
                        <el-option label="免费项目" value="免费项目" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.name" placeholder="请输入" style=" width: 350px; height: 40px;">
                        <template #suffix>
                            <el-icon @click="searchPro()">
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="$router.push('/data/serviceItem/add')">新增服务项目</el-button>
        </div>
        <ProjectData v-model="projectData.rows">
            <template #default="scoped">
                <el-button class="update" link @click="skip(scoped.row?._id)">编辑</el-button>
                <el-button class="delete" link @click="deleteProject(scoped.row?._id)">删除</el-button>
            </template>
        </ProjectData>
        {{ form }}
        <el-pagination class="pagination" v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="projectData.total" />
    </base-card>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { deleteProjectApi, searchProjectApi } from '../../api/projectManage';
import ProjectData from './projectData.vue';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue'
import { findServiceApi } from '../../api/serviceManage';

const router = useRouter();
const skip = (_id) => {
    router.push(`/data/serviceItem/update/${_id}`);
}
//搜索数据
const form = ref({
    type: "",
    name: ""
})


// 分页核心变量
const currentPage = ref(1)    // 当前页码
const pageSize = ref(10)      // 每页条数




const projectData = ref({
    rows: [],
    total: 0
})


onMounted(() => {
    searchProject()
})

//获取数据
function searchProject() {
    searchProjectApi().then((res) => {
        if (res.code == 200) {
            projectData.value.rows = res.data.rows
            projectData.value.total = res.data.total
        }
    })
}

//删除方法
function deleteProject(_id) {
    deleteProjectApi({ _id: _id }).then((res) => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        }
    })
}

function searchPro() {
    console.log(form.value);

    searchProjectApi(
        form.value
    ).then(res => {
        if (res.code == 200) {
            console.log(res.data.rows);

            projectData.value.rows = res.data.rows
            console.log(projectData.value.rows);

            projectData.value.total = res.data.total
        }
    })
}




</script>

<style scoped lang="scss">
.header {
    font-size: 18px;
    padding: 10px;
    border-left: 5px solid rgba(41, 132, 248, 1);
}

.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.update {
    color: rgba(41, 132, 248, 1)
}

.delete {
    color: rgba(255, 0, 0, 1);
}

.page-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 550;
    color: #333333E5;
}

.blue-radius {
    border-width: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 4px;
    margin-right: 10px;
}

.pagination {
    display: flex;
    justify-content: right;
}
</style>